<template>
  <div class="footer">
    <ul>
      <li
        @click="goto('/shouye')"
        :class="this.$route.path === '/shouye' ? 'zi' : ''"
      >
        <span class="iconfont">&#xe607;</span><span>首页</span>
      </li>
      <li
        @click="goto('/fenlei')"
        :class="this.$route.path === '/fenlei' ? 'zi' : ''"
      >
        <span class="iconfont">&#xe621;</span><span>分类</span>
      </li>
      <li
        @click="goto('/miquan')"
        :class="this.$route.path.slice(0,7) === '/miquan' ? 'zi' : ''"
      >
        <span class="iconfont">&#xe600;</span><span>米圈</span>
      </li>
      <li
        @click="goto('/gouwuche')"
        :class="this.$route.path === '/gouwuche' ? 'zi' : ''"
      >
        <span class="iconfont">&#xe605;</span><span>购物车</span>
      </li>
      <li
        @click="goto('/wode')"
        :class="this.$route.path === '/wode' ? 'zi' : ''"
      >
        <span class="iconfont">&#xe606;</span><span>我的</span>
      </li>
    </ul>
  </div>
</template>
/
<script>
export default {
  name: "Footerbar",
  methods: {
    goto(path) {
      this.$router.replace(path);
    },
  },
};
</script>

<style scoped>
.footer {
  width: 100%;
  height: 0.52rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
}
.footer ul {
  display: flex;
  justify-content: space-evenly;
}
.footer ul a {
  flex: 1;
  height: 0.52rem;
  color: #929292;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer ul li {
  flex: 1;
  height: 0.52rem;
  color: #929292;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer ul li span {
  margin-top: 0.05rem;
}
.footer ul .zi {
  color: #ff6226;
}
</style>